<template>
  <div>
    <div class="list1" v-if="flag == 0">
        <el-select v-model="statevalue" placeholder="智能设备状态" clearable style="margin-right: 10px;">
            <el-option
            label="完好"
            :value="1">
            </el-option>
            <el-option
            label="待维修"
            :value="2">
            </el-option>
        </el-select>
        <el-date-picker
        v-model="datevalue"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        format="yyyy-MM-dd "
        value-format="yyyy-MM-dd"
        style="margin-right: 10px;">
        </el-date-picker>
        <el-input v-model="inputvalue" placeholder="房号" style="width: 300px;"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="smartsearch" style="margin-left: 10px;">查询</el-button>
    </div>
    <div class="list1" v-if="flag==1">
        <el-select v-model="statevalue2" placeholder="家具设备状态" clearable style="margin-right: 10px;">
            <el-option
            label="完好"
            :value="1">
            </el-option>
            <el-option
            label="待维修"
            :value="2">
            </el-option>
        </el-select>
        <el-date-picker
        v-model="datevalue2"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        format="yyyy-MM-dd "
        value-format="yyyy-MM-dd"
        style="margin-right: 10px;">
        </el-date-picker>
        <el-input v-model="inputvalue2" placeholder="房号" style="width: 300px;"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="smartsearch2" style="margin-left: 10px;">查询</el-button>
    </div>
    <div class="list2">
        <el-tabs type="border-card" @tab-click="handleClick">
            <el-tab-pane label="智能设备" >
                <el-table
                v-loading="loading1"
                :data="smartData"
                border
                style="width: 100%">
                <el-table-column
                    prop="unitname"
                    align="center"
                    label="单元名称"
                    width="140">
                </el-table-column>
                <el-table-column
                    prop="buildnum"
                    label="幢号"
                    align="center"
                    width="140">
                </el-table-column>
                <el-table-column
                    prop="homenum"
                    align="center"
                    label="房号">
                </el-table-column>
                <el-table-column
                    prop="homename"
                    align="center"
                    label="房主">
                </el-table-column>
                <el-table-column
                    prop="airnum"
                    align="center"
                    label="空调">
                </el-table-column>
                <el-table-column
                    prop="wifiname"
                    align="center"
                    label="WI-FI">
                </el-table-column>
                <el-table-column
                    prop="washnum"
                    align="center"
                    label="洗衣机">
                </el-table-column>
                <el-table-column
                    prop="createtime"
                    align="center"
                    label="授予时间"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="smartstatus"
                    align="center"
                    label="状态">
                    <template slot-scope="scope">
                        {{ scope.row.smartstatus == 1?"完好":"待维修" }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="smartstatus"
                    align="center"
                    label="操作状态">
                    <template slot-scope="scope">
                    <el-switch
                    :value="scope.row.smartstatus"
                    active-color="#409EFF"
                    @change="getswtich(scope.row.id,scope.row.smartstatus)"
                    :active-value="1"
                    :inactive-value="2"
                    inactive-color="#DCDFE6">
                    </el-switch>
                </template>
                </el-table-column>
                
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    background
                    @current-change="handleCurrentChange"
                    :page-sizes="[5, 10, 20, 50,100]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="smarttotal"
                    style="text-align: right;">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="家具设备">
                <el-table
                :data="smartData2"
                border
                v-loading="loading2"
                style="width: 100%">
                <el-table-column
                    prop="unitname"
                    align="center"
                    label="单元名称"
                    width="140">
                </el-table-column>
                <el-table-column
                    prop="buildnum"
                    label="幢号"
                    align="center"
                    width="140">
                </el-table-column>
                <el-table-column
                    prop="homenum"
                    align="center"
                    label="房号">
                </el-table-column>
                <el-table-column
                    prop="homename"
                    align="center"
                    label="房主">
                </el-table-column>
                <el-table-column
                    prop="homedesk"
                    align="center"
                    label="书桌">
                </el-table-column>
                <el-table-column
                    prop="homechair"
                    align="center"
                    label="椅子">
                </el-table-column>
                <el-table-column
                    prop="homeclothes"
                    align="center"
                    label="衣柜">
                </el-table-column>
                <el-table-column
                    prop="createtime"
                    align="center"
                    label="授予时间"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="familystatus"
                    align="center"
                    label="状态">
                    <template slot-scope="scope">
                        {{ scope.row.familystatus == 1?"完好":"待维修" }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="familystatus"
                    align="center"
                    label="操作状态">
                    <template slot-scope="scope">
                    <el-switch
                    :value="scope.row.familystatus"
                    active-color="#13CE66"
                    @change="getswtich2(scope.row.id,scope.row.familystatus)"
                    :active-value="1"
                    :inactive-value="2"
                    inactive-color="#FF4949">
                    </el-switch>
                </template>
                </el-table-column>
                
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange2"
                    background
                    @current-change="handleCurrentChange2"
                    :page-sizes="[5, 10, 20, 50,100]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="smarttotal2"
                    style="text-align: right;">
                </el-pagination>
            </el-tab-pane>

        </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            //加载
            loading1:false,
            loading2:false,
            //卡片切换
            flag:0,
            //第一行数据
            statevalue:"",
            inputvalue:"",
            datevalue:"",
            statevalue2:"",
            inputvalue2:"",
            datevalue2:"",
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            //第二行数据
            smartData:[],
            smarttotal:"",
            smartData2:[],
            smarttotal2:"",
            //载荷
            devicepage:{
                smartstatus: "",
                familystatus: "",
                homenum: "",
                startDate:"" ,
                endDate: "",
                currPage: 0,
                pageNum: 10,
                token:sessionStorage.getItem("token"),
            },
            devicepage2:{
                familystatus: "",
                familystatus: "",
                homenum: "",
                startDate:"" ,
                endDate: "",
                currPage: 0,
                pageNum: 10,
                token:sessionStorage.getItem("token"),
            },
            //开关载荷
            swtichpage:{
                id: "",
                smartstatus: "",
                token:sessionStorage.getItem("token") ,
            },
            swtichpage2:{
                id: "",
                familystatus: "",
                token:sessionStorage.getItem("token") ,
            },
            //智能设备查询载荷

        }
    },
    created(){
        this.getpagemessage()
        this.getpagemessage2()
    },
    methods:{
        //初始化数据
        getpagemessage(){
            this.loading1 = true
            this.$axios.get("http://community.byesame.com/house/searchdeviceList",{params:this.devicepage}).then((res)=>{
                console.log(res.data)
                this.smartData = res.data.data
                for(let i =0;i<this.smartData.length;i++){
                    const date = new Date(this.smartData[i].createtime);  
                    const utcHours = date.getUTCHours();  
                    const beijingHours = (utcHours + 8) % 24;
                    const minutes = date.getUTCMinutes();  
                    const seconds = date.getUTCSeconds();
                    const formattedTime = `${date.getUTCFullYear()}-${date.getUTCMonth() + 1}-${date.getUTCDate()} ${beijingHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                    this.smartData[i].createtime = formattedTime;
                    
                }
                this.smarttotal = res.data.total
                setTimeout(() => {
                    this.loading1 = false
                }, 500);
            })
        },
        getpagemessage2(){
            this.loading2 = true
            this.$axios.get("http://community.byesame.com/house/searchdeviceList",{params:this.devicepage2}).then((res)=>{
                console.log(res.data)
                this.smartData2 = res.data.data
                for(let i =0;i<this.smartData2.length;i++){
                    const date = new Date(this.smartData2[i].createtime);  
                    const utcHours = date.getUTCHours();  
                    const beijingHours = (utcHours + 8) % 24;
                    const minutes = date.getUTCMinutes();  
                    const seconds = date.getUTCSeconds();
                    const formattedTime = `${date.getUTCFullYear()}-${date.getUTCMonth() + 1}-${date.getUTCDate()} ${beijingHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                    this.smartData2[i].createtime = formattedTime;
                    
                }
                this.smarttotal2 = res.data.total
                setTimeout(() => {
                    this.loading2 = false
                }, 500);
            })
        },
        //分页器方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.devicepage.pageNum = val
            this.getpagemessage()
        },
        handleCurrentChange(val) {
            this.devicepage.currPage= val-1;
            this.getpagemessage()
        },
        handleSizeChange2(val) {
            console.log(`每页 ${val} 条`);
            this.devicepage2.pageNum = val
            this.getpagemessage2()
        },
        handleCurrentChange2(val) {
            this.devicepage2.currPage= val-1;
            this.getpagemessage2()
        },
        //状态开关
        getswtich(id,state){
            this.$confirm('确定更新该智能设备状态？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if(state==1){
                    this.swtichpage.smartstatus = 2
                }else{
                    this.swtichpage.smartstatus = 1
                }
                this.swtichpage.id = id
                this.$axios.post("http://community.byesame.com/house/updatesmartStatus",this.swtichpage).then((res)=>{
                    console.log(res.data)
                    this.$message({
                    type: 'success',
                    message: '更新成功!'
                    });
                    this.getpagemessage()
                })
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消更新'
                });  
                this.getpagemessage()        
            });

        },
        getswtich2(id,state){
            this.$confirm('确定更新该智能设备状态？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if(state==1){
                    this.swtichpage2.familystatus = 2
                }else{
                    this.swtichpage2.familystatus = 1
                }
                this.swtichpage2.id = id
                this.$axios.post("http://community.byesame.com/house/updatefamilyStatus",this.swtichpage2).then((res)=>{
                    console.log(res.data)
                    this.$message({
                    type: 'success',
                    message: '更新成功!'
                    });
                    this.getpagemessage2()
                })
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消更新'
                });  
                this.getpagemessage2()        
            });

        },
        //智能设备查询
        smartsearch(){
            this.devicepage.smartstatus = this.statevalue
            if(this.datevalue == null){
                this.devicepage.startDate = ""
                this.devicepage.endDate = ""
            }else{
                this.devicepage.startDate = this.datevalue[0]
                this.devicepage.endDate = this.datevalue[1]
            }
            this.devicepage.currPage = 0
            this.devicepage.homenum = this.inputvalue
            this.getpagemessage()
        },
        smartsearch2(){
            this.devicepage2.familystatus = this.statevalue2
            if(this.datevalue2 == null){
                this.devicepage2.startDate = ""
                this.devicepage2.endDate = ""
            }else{
                this.devicepage2.startDate = this.datevalue2[0]
                this.devicepage2.endDate = this.datevalue2[1]
            }
            
            this.devicepage2.currPage = 0
            this.devicepage2.homenum = this.inputvalue2
            this.getpagemessage2()
        },
        //卡片切换
        handleClick(tab) {
            this.flag = tab.index
        }
    }
}
</script>

<style scoped> 
.list1{
    margin-bottom: 15px;
}
::v-deep .el-table th{
    background-color: #EEF1F6;
}
::v-deep.el-table thead {
  font-weight: bold;
  font-size: 16px;
  color: black;
}
::v-deep .el-table tr{
    color: black;
    font-size: 14px;
}
</style>